<style lang="scss" scoped>
    .teach_exam{
        min-height: calc(100vh - 80px);
    }
</style>
<template>
    <div class="teach_exam py-2 border-radius">
        <div v-if="!step">
            <h4 class="block-title">{{content.title}}</h4>
            <div class="mt-1 p-2">
                <div class="desp w-100b" style="word-break:break-all" v-html="content.content"></div>
                <div class="mt-2" v-if="content.file_list.length">
                    <span class="mr-1"> 附件列表：</span>
                    <download-list :file_list="content.file_list"/>
                </div>
                <div class="mt-4">
                    <Button @click="step=1" type="primary" size="large">开始讲解</Button>
                </div>
            </div>
        </div>
        <div class="problems p-1" v-else-if="step===1">
            <h4 class="block-title">题目树 <span class="color-999 font-12">（点击标题展示展示题目，点击上下箭头展示子节点）</span></h4>
            <Tree :data="treeData" ref="tree" @on-select-change="getNode" :render="treeRender"></Tree>
            <p class="font-12 mt-1 color-999 ml-1"><Icon type="ios-paper-outline" class="mr-1" color="#ff9900" />表示该节点尚有题目未作答，<Icon type="ios-paper-outline" class="mr-1" color="#19be6b"/>表示该节点所有题目已作答完毕。</p>
            <Divider>题目列表</Divider>
            <div v-if="active_node.id">
                <p class="text-center font-16 color-fff" v-if="!currentGroup.length">此节点下无题目</p>
                <div v-for="(value,index) in currentGroup" :key="index" class="mt-2 mb-1 currentGroup">
                    <div class="d-flex line-height-26">
                        <h4 class="block-title  mr-1">{{value.is_multi?'多选题':'单选题'}}</h4>
                    </div>
                    <div class="details p-1">
                        <p class="mb-1">{{value.title}}</p>
                        <CheckboxGroup v-if="value.is_multi" v-model="currentGroupAnswer[index]" >
                            <Checkbox class="d-block mb-1" :label="val.index" v-for="val in value.option" :key="val.index">{{val.index+'：'+val.text}}</Checkbox>
                        </CheckboxGroup>
                            <RadioGroup v-else vertical v-model="currentGroupAnswer[index]">
                                <Radio :label="val.index" v-for="val in value.option" :key="val.index">{{val.index+'：'+val.text}}</Radio>
                            </RadioGroup>
                        <div class="my-1" v-if="value.file_list.length">
                            <span class="mr-1">附件列表:</span>
                            <download-list :file_list="value.file_list"/>
                        </div>
                    </div>
                </div>
                
            </div>
            <Button type="primary" class="my-2 ml-1" v-if="active_node.id" @click="submit_part" >提交</Button>
        </div>
    </div>
</template>
<script>
    import {lesson_view,un_answer_question_students} from "@/common/tapi"
    import {diff_arr} from "@/common/tool"
    export default {
        data(){
            return {
                step:0,
                content:{
                    file_list:[]
                },
                questions_list:[],
                currentGroupAnswer:[],
                currentGroup:[],
                treeData:[],
                active_node:{
                    id:'',
                    title:''
                },
            }
        },
         methods:{
            getNode(){
                this.currentGroupAnswer=[]
                const node=this.$refs.tree.getSelectedNodes()
                if(node.length){
                    const {title,id,finish}=node[0]
                    this.active_node={id,title,finish}

                    this.currentGroup=this.questions_list.filter(el=>{
                        if(el.node_id===id){
                            this.currentGroupAnswer.push(el.is_multi?(el.tmp_answer?el.tmp_answer.split(','):[]):(el.tmp_answer || ''))
                            return el
                        }
                    })
                }
            },
            treeRender(h, { data }){
                return h('span', {
                    style: {
                        display: 'inline-block',
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px',
                                color:data.finish?'#19be6b':'#ff9900'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    })
                ]);
            },
            submit_part(){
                if(this.currentGroupAnswer.some(el=>Array.isArray(el)?!el.length:!el)){
                    this.$Notice.warning({
                        title: '提交失败',
                        desc: '还有题目未作答！'
                    });
                    return
                }
                const update_finish=(arr)=>{
                    arr.forEach((el,index)=>{
                        if(el.id===this.active_node.id)
                            this.$set(arr[index],'finish',true)
                        else
                            update_finish(el.children || [])
                    })
                }
                
                update_finish(this.treeData)
                let complete=true
                this.questions_list.forEach((els,index)=>{
                    this.currentGroup.forEach( (el,i)=>{
                        if(el.id===els.id){
                            //找到已经作答的  题目列表 和当前组的题目，答案排序后放入题目列表
                            els.tmp_answer=Array.isArray(this.currentGroupAnswer[i])?this.currentGroupAnswer[i].sort((a,b)=>a.charCodeAt(0)-b.charCodeAt(0)).join(','):this.currentGroupAnswer[i]
                        }
                    })
                    if(!els.tmp_answer)
                        complete=false
                })
                this.active_node.finish=true
                let modelFile=[],node=null
                if(complete){
                    this.content.answers.forEach(el=>{
                        if(diff_arr(el.answers,this.questions_list.map(e=>e.tmp_answer))){
                            modelFile=el.files
                        }
                    })
                    this.$Modal.confirm({
                        render: (h) => {
                            node=modelFile.length?h('div',[ h('span','当前组合：'),h('download-list',{props:{file_list:modelFile}})]):h('p','当前组合未上传')
                            return h('div',[
                                h('h4',{class:'mb-3 font-16'},'组合展示'),
                                node
                            ])
                        }
                    })

                }else{
                    this.$Notice.success({
                        title: '提交成功',
                        desc: '作答成功，请选择其他主题！'
                    });
                }
                
            },
        },
        created(){
            lesson_view({lid:this.$route.query.lid})
            .then(res=>{
                if(res){
                    this.content=res.data.lesson
                    this.questions_list=res.data.question
                    this.treeData=res.data.lesson.nodes
                }
            })
        }
    }
</script>